<template>
	<view class="page">
		<scroll-view :scroll-y="modalName==null" :class="modalName!=null?'show':''">
			<view class="cu-list menu">
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">实发工资</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="realPay"
						placeholder="请输入"/>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">社保工伤缴纳基数</text>
						<image style="width: 15px;height: 12px;" src="@/static/images/info.png" mode="widthFix" @click="showInfo('未购买社保，可填写为0')" />
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="10" v-model="basePay" placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">当前年龄</text>
					</view>
					<view class="action">
						<input class="input" type="number" v-model="current_age" placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">退休年龄</text>
					</view>
					<view class="action flex align-center">
						<picker mode="selector" :range="age" :value="ageInd" @change="changeAge">
							<view :class="ageInd?'text-sm':'text-sm place'" style="height: 16px;line-height: 16px;">{{age[ageInd]}}</view>
						</picker>

						<!-- <input class="input" type="number" v-model="age" placeholder="请输入" placeholder-class="placeholder" /> -->
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view class="text-grey">
							<text>工休月份</text>
							<image style="width: 15px;height: 12px;" src="@/static/images/info.png" mode="widthFix" @click="showInfo('工伤停工留薪月份最长24个月，不同部位受伤的停工留薪月份不一样，参考附件《留薪目录表》')" />
						</view>
					</view>
					<view class="action flex align-center">
						<input class="input" @blur="monthMax" type="number" v-model="monthVal" placeholder="请输入" placeholder-class="placeholder" />
						<!-- <picker mode="selector" :range="month" :value="monthVal" @change="changeMonth">
							<view :class="monthVal?'text-sm':'text-sm place'" style="height: 16px;line-height: 16px;">{{month[monthVal]}}</view>
						</picker>
						  -->
					</view>

				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">工伤等级(1-10)</text>
					</view>
					<view class="action flex align-center">
						<picker mode="selector" :range="injury_level" :value="level" @change="changeLevel">
							<view :class="level?'text-sm':'text-sm place'" style="height: 16px;line-height: 16px;">{{injury_level[level]}}</view>
						</picker>

						<!-- <input class="input" type="number" :maxlength="2" v-model="level" placeholder="请输入" placeholder-class="placeholder" /> -->
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">社平工资</text>
					</view>
					<view class="action">
						<input class="input" type="number" v-model='spgz'  placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view @click="openPdf()" style="padding-left: 30rpx;height: 50px;line-height: 50px;">附件：<text class="text-blue">《留薪目录表》</text> </view>
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round" @tap="goPage('/pages/tabbar/company/injuryResult')">查看测算结果</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="title">备注：全国城镇居民人均可支配收入2021年为4.74万元、2022年为4.93万元。</view>
		<quick-message ref="message"></quick-message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// cityPickerValueDefault: [0, 0, 1],
				// pickerText: '',
				// areaCompare:'请选择',
				// area:'请选择',
				// areaIndex:0,
				sexIndex:-1,
				sexPicker: ['男', '女'],
				workIndex:0,
				workPicker: ['是','否'],
				basePay:'',
				realPay:'',
				age:[45,50,55,60],//退休年龄
				ageInd:3,
				resultData:'',
				modalName: null,
				spgz:7750,
				monthVal:'',
				current_age:'',
				injury_level:['请选择',10,9,8,7,6,5,4,3,2,1],
				level:0,
			};
		},
		methods: {
			openPdf(){
			  let path = this.$APP_URL +'files/重庆市工伤职工停工留薪期分类目录.pdf'
				console.log(path);
				uni.showLoading({
					title:'打开文件中'
				})
				uni.downloadFile({
					url:path,
					success: (data) => {
						console.log(data);
						if (data.statusCode === 200) {
							//文件保存到本地
							// uni.saveFile({
								// tempFilePath: data.tempFilePath, //临时路径
								// success: function(res) {
									//打开文档查看
									uni.openDocument({
										filePath: data.tempFilePath,
										showMenu:true,
										success: function(res) {
											uni.hideLoading()
											// console.log('打开文档成功');
										},
										fail: (err) => {
											console.log(err);
											uni.hideLoading()
											uni.showToast({
												icon: 'none',
												mask: true,
												title: '失败请重新下载',
											});
										},
									});
								// }
							// });
						}
						uni.hideLoading()
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			monthMax(){
				if(this.monthVal>=25){
					uni.showToast({
						title:'工休月份最多为24个月，详情请参考附件',
						icon:'none',
						duration:2500
					})
					this.monthVal=''
				}
			},
			showInfo(msg){
				this.$refs.message.show({
					type:'default', //String 默认default
					msg:msg, //String 显示内容 *
					direction:'center', //String 默认顶部显示
					icon:false, //Boolean|String 显示icon(false/true/string 默认显示icon)
					//mask:true, //Boolean 遮罩（默认false没有遮罩）
					// time:5000, //Number|Boolean 默认3000/false为不自动关闭
					customStyle:{ //自定义样式
							color:'#FFFFFF', //字体图标色
							backgroundColor:'rgba(0,0,0,.5)' //背景色
					},
					iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
					iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
				})
			},
			changeLevel(e){
				this.level=e.detail.value
			},
			changeAge(e){
				this.ageInd=e.detail.value
			},
			goPage(page){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.realPay<=0)errMsg = '请填写实发工资';
					if(this.basePay=='')errMsg = '请填写社保工伤缴纳基数';
					// if(this.sexIndex<0)errMsg = '请选择员工性别';
					if(this.current_age<=0)errMsg='请填写当前年龄'
					if(this.ageInd<=0)errMsg = '请选择员工退休年龄';
					if(this.monthVal<=0)errMsg = '请选择工休月份';
					if(this.level<=0)errMsg = '请选择工伤等级';
					if(this.spgz<=0) errMsg='请填写社平工资'
					// if(this.monthVal>=25)errMsg='工休月份最多为24个月，详情请参考附件'
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					let params={
						wages:this.realPay,
						injury_base:this.basePay,
						age:this.current_age,
						retire:this.age[this.ageInd],
						level:this.injury_level[this.level],
						avg_wages:this.spgz,
						retire_month:this.monthVal
					}
					uni.setStorageSync('injuryParam',params);
					uni.navigateTo({
						url: page
					})
					return;
				}
				this.$refs.goReg.showModal('regModal');
				return;
			},
			sexChange(e) {
				this.sexIndex = e.detail.value
			},
			workChange(e) {

				this.workIndex=0
				if(e.detail.value){
					this.workIndex=1;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		/* height: 100Vh; */
		width: 100vw;
		height: 100vh;
		background: #F6F6F6;
		.title{
			text-align: justify;
			padding: 0 20px;
			font-family: '宋体';
		}
	}

	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
	}
	.cu-list{
		// height: 375px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
	}
	.cu-btn{
		height: 80rpx !important;
		width: 80%;
		margin: 0 10%;
		color: #fff;
    background: linear-gradient(135deg, #4CFECE 0%, #4CA5FE 100%);
		/* box-shadow: 0px 3px 6px #4CA5FE; */
	}
	uni-switch::before{
		content: "否";
	}
	uni-switch::after{
		content: "是";
	}
	switch::before{
		content: "否";
	}
	switch::after{
		content: "是";
	}
	.page.show {
		overflow: hidden;
	}
	.input{
		text-align: right;
		font-size: 12px;
	}
	.place{
		color: gray;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
